<template>
    <div>
        <div class="layout-content-breadcrumb">
            <Breadcrumb>
                <Breadcrumb-item>内容管理</Breadcrumb-item>
                <Breadcrumb-item>新增内容</Breadcrumb-item>
            </Breadcrumb>
        </div>
        <div class="page-content">
            <Row type="flex" :gutter="16">
                <Col span="18">
                <Form ref="model" :model="model" :label-width="80">
                    <Form-item label="分类*">
                        <Select v-model="model.category_id" placeholder="请选择分类">
                            <Option v-for="item in types" :value="item.id" :key="item.id">{{item.name}}</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="标题*">
                        <Input v-model="model.title" placeholder="请输入标题" size="large">
                        </Input>
                    </Form-item>
                    <Form-item label="内容*">
                        <hx-editor
                                v-model="model.content"
                                file-name="file"
                                file-upload-way="thirdParty"
                                :max-size="1024">
                        </hx-editor>
                    </Form-item>
                    <Form-item label="关键词">
                        <Input v-model="model.match_keyword" placeholder="请输入关键词以逗号(，)分隔" size="large">
                        </Input>
                    </Form-item>
                    <Form-item>
                        <Button type="primary" @click="onSave">保存</Button>
                    </Form-item>
                </Form>
                </Col>
            </Row>
        </div>
    </div>
</template>
<style lang="less">

</style>
<script>
    import api from 'service/information'
    export default{
        data(){
            return {
                model: {
                    category_id: '',
                    title: '',
                    content: '',
                    match_keyword: ''
                },
                types:[],
                isEdit:false
            }
        },
        mounted(){
            this.isEdit=typeof this.$route.params.id!=='undefined'
            if(this.isEdit){
                this.getDetail()
            }else {
                this.getTypes()
            }
        },
        methods: {
            onSave(){
                let category_id = this.model.category_id
                let title = this.model.title.trim()
                let content = this.model.content.trim()
                if (!title || !content || !category_id) {
                    return this.$Message.warning('*号的为必填项！')
                }
                if(this.isEdit){
                    api.updateContent(this.model).then(() => {
                        this.$Message.success('更新成功！')
                        this.$router.back()
                    })
                }else {
                    api.addContent(Object.assign({},this.model,{kind:'1'})).then(() => {
                        this.$Message.success('新增成功！')
                        this.$router.back()
                    })
                }
            },
            getDetail(){
                this.getTypes(()=>{
                    api.getDetail({id:this.$route.params.id}).then(({data})=>{
                        this.model=data||{}
                    })
                })
            },
            getTypes(cb){
                api.getCategoryList()
                    .then(({data}) => {
                        this.types = (data.list || []).map(item => {
                            return {
                                id: item.id,
                                name: item.title
                            }
                        })
                        cb&&cb()
                    })
            }
        }
    }
</script>